<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/juese' }">系统管理 </el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/juese'}">角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-dialog :visible.sync="daoru2">

    </el-dialog>
    <el-row style="float: left; margin-left: 66px;margin-top: 17px;">
      角色名称:<el-input v-model="name" style="width: 150px"></el-input>
      角色状态:<el-select v-model="value" placeholder="请选择" @change='selects()' style="width: 150px" clearable>
        <el-option v-for="item in options" :key="item.value" :value="item.value">
        </el-option>
      </el-select>
      <el-button @click='chaxun()' icon="el-icon-search" type="primary" style="margin-left: -4px;">查询</el-button>
      <el-button @click="tianjia()" icon="el-icon-edit" type="primary" style="margin-left: -3px;">添加角色</el-button>
      <el-button @click='daoru()' icon="el-icon-download" type="primary" style="margin-left: -4px;">导入</el-button>
      <el-button @click="daochu()" icon="el-icon-upload2" type="primary" style="margin-left: -3px;">导出</el-button>
    </el-row>
    <el-table :data="juese" style="width: 1000px;margin: auto;">
      <el-table-column label="角色编号" prop="rid" width="200px"></el-table-column>
      <el-table-column label="角色名称" prop="rname" width="200px"></el-table-column>
      <el-table-column label="创建人" prop="createby" width="200px"></el-table-column>
      <el-table-column label="更新时间" prop="createtime" width="200px"></el-table-column>
      <el-table-column label="状态" width="200px">
        <template slot-scope="scope">
          <el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="scope.row.isStatus" :active-value="1"
            :inactive-value="0" @change="chageSwitch($event,scope.row,scope.$index)">
          </el-switch>
        </template>

      </el-table-column>

    </el-table>
    <el-pagination @current-change="page" @prev-click="page" @next-click="page" background layout="prev,pager,next,total,jumper"
      :total="total" :page-size="
      size"></el-pagination>
    <el-dialog title="添加角色" width="50%" :visible="visible" @close="visible=false">
      角色名称：<el-input v-model="addjuese.userName" style="width: 150px"></el-input>
      <template slot="footer">
        <el-button type="primary" @click="closeMe">确定</el-button>
        <el-button type="info" @click="visible=false">取消</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios';
  import Test from '../daoru/daoru';
  export default {
    inject: ['reload'],
    data() {
      return {
        name: '',
        daoru2: false,
        options: [{
          value: '启用'

        }, {
          value: '未启用'

        }],
        value: '',
        juese: [],
        total: 0,
        visible: false,
        visible2: false,
        visible3: false,
        addjuese: {
          userName: '',
          isstatus: '1'
        },
        juese2: {
          no: '',
          name: '',
          userName: '',
          type: '',
          time: new Date()
        },
        size: 5,

        click: 'all'

      }
    },
    methods: {
      selects: function() {
        console.log(this.value)
      },
      chaxun: function() {
        this.click = 'chaxun'
        var self = this
        console.log(this.name)
        console.log(this.value)
        var s = 0;
        if (this.value === '启用') {
          s = 1;
        } else if (this.value === '不启用') {
          s = 0;
        } else if (this.value === '') {
          s = 2;
        }
        console.log(s);
        axios.get("http:localhost:8086/role/where", {
          params: {
            rname: this.name,
            isstatus: s,
            curpage: 1,
            pageSize: this.size
          }
        }).then(v => {
          this.juese = [];
          this.juese = v.data.list
          console.log(this.juese, 8)
          this.total = v.data.total
          this.juese.forEach(function(item) {
            item.createtime = self.aaa(item.createtime)
          })

        }).catch(r => console.log(r))
      },
      /* 添加角色-----------------*/
      closeMe: function() {

        console.log(this.addjuese.userName)
        console.log(this.addjuese.isstatus)
        console.log(this.$store.state.user.uname)
        axios.get("http:localhost:8086/role/add", {
          params: {
            rname: this.addjuese.userName,
            isstatus: this.addjuese.isstatus,
            createby: this.$store.state.user.uname
          }
        }).then(v => {
          if (v.data) {
            this.$message("添加成功")
            this.getData(1, 5)
            this.addjuese.userName = ""
              this.visible = false
          } else if (v.data ==false) {
            this.$message("添加失败已有改角色")
          }

        }).catch(r => {


          console.log(r)
        })


      },
      tianjia: function() {
        console.log(this.juseName)
        this.visible = true
      },
      getData: function(curpage, pagesize) {
        var self = this
        axios.get("http:localhost:8086//role/all", {
            params: {
              curpage: curpage,
              pagesize: this.size
            }
          })
          .then(vs => {

              this.juese = vs.data.list

              console.log(this.juese)
              console.log(vs.data.list)
              this.total = vs.data.total
              this.juese.forEach(function(item) {
                item.createtime = self.aaa(item.createtime)
              })
            }

          )
          .catch(err =>
            console.log(err)
          )
      },
      page: function(curpage) {
        if (this.click == 'all') {
          this.getData(curpage, 5)
        } else if (this.click == 'chaxun') {
          var s = 0;
          var self = this
          if (this.value === '启用') {
            s = 1;
          } else if (this.value === '不启用') {
            s = 0;
          } else if (this.value === '') {
            s = 2;
          }
          console.log(s);
          axios.get("http:localhost:8086/role/where", {
            params: {
              rname: this.name,
              isstatus: s,
              curpage: curpage,
              pageSize: this.size
            }
          }).then(v => {
            this.juese = [];
            this.juese = v.data.list
            console.log(this.juese, 8)
            this.total = v.data.total
            this.juese.forEach(function(item) {
              item.createtime = self.aaa(item.createtime)
            })

          }).catch(r => console.log(r))
        } else if (this.click == 'update') {
          this.getData(curpage, this.size)
        }

      },
      selectss: function() {
        var self = this
        let arr = []
        this.juese.forEach(item => {
          console.log(item.type)
          if (item.type == '启用') {
            arr.push(item)
          }
        })
        console.log(arr)

      },
      postDate: function(v) {
        console.log(v, '______________________')

        axios.post('http:localhost:8086/jj', v)
          // ,JSON.stringify(arr),{headers:{'Content-Type':'application/json'}}
          .then(vs => console.log(vs.data))
          .catch(err => console.log(err))
      },


      aaa: function(asd) {
        var date = new Date(asd) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()

        console.log(Y + M + D + h + m + s);
        return Y + M + D + h + m + s;
      },
      chageSwitch(data, b, index) {
        this.click = 'update'
        if (b.rname === '系统管理员') {
          this.$message('系统管理员不能停用')
          this.getData(1, 5)
          return
        }
        axios.get("http:localhost:8086/role/update", {
          params: {
            rid: b.rid,
            isstatus: data
          }
        }).then(d => {
          this.getData(1, 5)
        }).catch()
      },
      daoru() {
        this.daoru2 = true;
      },
      daochu() {
        window.location.href = 'http:localhost:8086/exportExcel/daochurole'
      }


    },
    created: function() {
      this.getData(1, 5)
    }
  }
</script>

<style scoped="scoped">
  /* .jueseform{
  margin-left: -260px;
  margin-bottom: -50px;

  }
   .jueseform .el-form-item{
  display: inline-block;

  } */
</style>
